<template>
  <div class="joe_container">
    <div class="joe_main">

      <!-- 基础统计 -->
      <a-card :bordered="false">
        <a-row>
          <a-col :span="24">
            <a-textarea v-model="douYinUrl" :rows="4" placeholder="抖音分享链接"/>
          </a-col>
          <a-col :span="24" style="margin-top: 10px;text-align: center">
            <a-button :loading="loading" icon="search" @click="douYinTool">下载视频</a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>
import {fileDataDownloadIO, getAction} from "@/api/manage";

export default {
  name: "DouYinTool",
  data() {
    return {
      douYinUrl: "",
      url: "/douyin",
      loading: false
    }
  },
  methods: {
    douYinTool() {
      this.loading = true
      // window.open(this.url + "?url=" + this.douYinUrl);
      fileDataDownloadIO(this.url, {url: this.douYinUrl}).then(res => {

        // 视频的type是video/mp4，图片是image/jpeg
        const blob = new Blob([res.data], {type: 'video/mp4'});
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;

        let time = parseInt(new Date().getTime() / 1000) + '';

        downloadElement.download = time + ".mp4";
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement); //移除元素；防止连续点击创建多个a标签
        window.URL.revokeObjectURL(href);
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
